<template>
  <n-drawer
    :show="show"
    :width="width"
    :mask-closable="maskClosable"
    :auto-focus="false"
    @update:show="stateChange"
  >
    <n-drawer-content :footer-style="footerStyle">
      <template #header>
        <div class="g-flex-space-between">
          <div class="left">{{ title }}</div>
          <icon-operat @close="closeHandle"></icon-operat>
        </div>
      </template>
      <slot></slot>
      <template v-if="isSave || isCancel" #footer>
        <n-space item-style="display: flex;">
          <n-button v-if="isSave" type="primary" @click="saveBtnClick"
            >保存</n-button
          >
          <n-button v-if="isCancel" @click="cancelBtnClick">取消</n-button>
        </n-space>
      </template>
    </n-drawer-content>
  </n-drawer>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import IconOperat from "./IconOperat.vue";

export default defineComponent({
  components: {
    IconOperat,
    // CloseOutline,
    // ContractOutline,
  },
  props: {
    show: {
      type: Boolean,
      required: false,
    },
    title: {
      type: String,
      default: "标题",
    },
    // 点击遮罩时是否关闭抽屉
    maskClosable: {
      type: Boolean,
      default: true,
    },
    isSave: {
      type: Boolean,
      default: true,
    },
    isCancel: {
      type: Boolean,
      default: true,
    },
    width: {
      type: Number,
      default: 600,
    },
  },
  emits: ["update:show", "save", "cancel"],

  setup(props, { emit }) {
    console.log("============basicDrawer组件创建=====");
    const footerStyle = {
      justifyContent: "start",
    };

    const saveBtnClick = () => {
      emit("save");
    };
    const cancelBtnClick = () => {
      emit("cancel");
      closeHandle();
    };
    const stateChange = (show: Boolean) => {
      console.log(show);
      emit("update:show", show);
    };

    const closeHandle = () => {
      console.log("关闭");
      emit("update:show", false);
    };

    return {
      footerStyle,
      stateChange,
      saveBtnClick,
      cancelBtnClick,
      closeHandle,
    };
  },
});
</script>

<style lang="less" scoped>
:deep(.n-drawer-header .n-drawer-header__main) {
  flex: 1;
}
</style>
